<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">父级菜单</label>
            <div class="layui-input-block">
                <input type="hidden" name="pid" value="" id="demo2Pid">
                <input type="text" name="menuName" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input" id="demo2">
                <tip>选择父级菜单。</tip>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" placeholder="请输入菜单名称" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-block">
                <input type="text" name="icon" lay-verify="required" placeholder="请输入菜单图标" value="" class="layui-input" id="iconPicker1" lay-filter="iconPicker2">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单URL</label>
            <div class="layui-input-block">
                <input type="text" name="href" placeholder="请输入菜单URL" value="" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table','tableSelect','iconPickerFa'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            tableSelect = layui.tableSelect,
            iconPickerFa = layui.iconPickerFa,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        tableSelect.render({
            elem: '#demo2',
            checkedKey: 'id',
            table: {
                url: 'menu/allFolder',
                cols: [[
                    { type: 'radio' },
                    { field: 'id', title: 'id' },
                    { field: 'pid', title: 'pid' },
                    { field: 'name', title: '姓名' },
                    { field: 'icon', title: '菜单图标' }
                ]]
            },
            done: function (elem, res) {
                var NEWJSON = []
                console.log(res)
                layui.each(res.data, function (index, item) {
                    NEWJSON.push(item.name)
                })
                //单选的获取一个元素填充到隐藏域中
                $('#demo2Pid').val(res.data[0].id)
                elem.val(NEWJSON.join(","))
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            //发送ajax请求
            data.field.icon = 'fa '+ data.field.icon
            $.ajax({
                type: "POST",
                url: "menu/save",//发送请求
                data: data.field,
               // contentType:"application/json;charset=utf-8",
                success: function (result) {
                    if (result.code == 0){
                        layer.msg(result.msg)
                    }else {
                        layer.msg(result.msg)
                    }
                },
                error: function (err) {
                    if (typeof error === 'function') {
                        error(err)
                    } else {
                        console.error(err)
                    }
                },
                complete: function (res) {
                    // 关闭弹出层
                    // layer.close(index);
                     layer.close(parentIndex);
                }
            })
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //
            //     // 关闭弹出层
            //     layer.close(index);
            //     layer.close(parentIndex);
            //
            // });
            return false;
        });

        //ICON选择器
        iconPickerFa.render({
            // 选择器，推荐使用input
            elem: '#iconPicker1',
            // fa 图标接口
            url: "lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false
            search: true,
            // 是否开启分页
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                console.log(d);
            }
        });
    });
</script>
